<template>
	<view>
		<view class="fund-header">
			<view class="layout">				
				<view class="fund-header-backend" @click="handleBackendButton()">
					<image src="../../../static/icon/icon-back.png"></image>
				</view>
				<view class="fund-header-tooltip">
					<view>{{fundData.productName}}</view>
					<view>{{fundData.productRemark}}</view>
				</view>
				<view class="fund-header-more">
					<image src="../../../static/icon/icon-moer.png"></image>
				</view>
			</view>
		</view>
		<view class="fund-basic">
			<view class="layout">				
				<view class="fund-basic-rate">
					<view class="fund-basic-rate-volume">{{fundData.rate}}%</view>
					<view class="fund-basic-rate-tooltip">约定年化收益率</view>
				</view>
				<view class="fund-basic-deadline">
					<view class="fund-basic-deadline-volume layout">
						<view>{{fundData.productTotal}}</view>
						<view>天</view>
					</view>
					<view class="fund-basic-deadline-tooltip">投资期限</view>
				</view>
				<view class="fund-basic-origin">
					<view class="fund-basic-origin-volume">{{fundData.miniTotal}}起购</view>
					<view class="fund-basic-origin-tooltip">低风险</view>
				</view>
			</view>
		</view>
		<view class="fund-info">
			<view class="fund-info-title">产品介绍</view>
			<view class="fund-info-box">
				<view class="fund-info-box-block">
					<view class="fund-info-box-icon">
						<image src="../../../static/logo.png"></image>
					</view>
					<view class="fund-info-box-block-note">
						<view class="fund-info-box-block-note-title">低起投额</view>
						<view>1000元起投</view>
					</view>
				</view>
				<view class="fund-info-box-block">
					<view class="fund-info-box-icon">
						<image src="../../../static/logo.png"></image>
					</view>
					<view class="fund-info-box-block-note">
						<view class="fund-info-box-block-note-title">固定期限，约定收益</view>
						<view>约定收益率，到期一次性还本付息</view>
					</view>
				</view>
				<view class="fund-info-box-block">
					<view class="fund-info-box-icon">
						<image src="../../../static/logo.png"></image>
					</view>
					<view class="fund-info-box-block-note">
						<view class="fund-info-box-block-note-title">华泰自营，明星产品</view>
						<view>理财热门产品，华泰深交所报价回购系列</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fund-rules">
			<view class="fund-rules-title">交易规则</view>
			<view class="fund-rules-process layout">
				<view class="fund-rules-process-item">
					<view>买入</view>
					<view>{{orderData.orderDate}}</view>
				</view>
				<view class="fund-rules-process-item">
					<view>起息</view>
					<view>{{orderData.effectiveDate}}</view>
				</view>
				<view class="fund-rules-process-item">
					<view>到期/资金可用</view>
					<view>{{orderData.expireDate}}</view>
				</view>
				<view class="fund-rules-process-item">
					<view>资金可取</view>
					<view>{{orderData.redeemDate}}</view>
				</view>
			</view>
			<view class="fund-rules-tooltip">以上时间仅供参考，以实际到账时间为准。</view>
			<view class="fund-rules-group">
				<view class="fund-rules-group-tooltip">购买时间</view>
				<view class="fund-rules-group-text">
					每个交易日9：15-15：30可购买
				</view>
			</view>
			<view class="fund-rules-group">
				<view class="fund-rules-group-tooltip">收益计算</view>
				<view class="fund-rules-group-text">
					当日购买，自12月9日起，共计算63天收益
				</view>
			</view>
			<view class="fund-rules-group">
				<view class="fund-rules-group-tooltip">资金可取</view>
				<view class="fund-rules-group-text">
					当日购买，预计2025年02月10日资金可取
				</view>
			</view>
			<view class="fund-rules-group">
				<view class="fund-rules-group-tooltip">自动续做</view>
				<view class="fund-rules-group-text">
					选择自动续做，本金将于到期当天自动买入同期限产品
				</view>
			</view>
			<view class="fund-rules-group">
				<view class="fund-rules-group-tooltip">提前购回</view>
				<view class="fund-rules-group-text">
					提前购回年收益率0.35%
				</view>
			</view>
			<view class="fund-rules-tooltip">交易日9：15-11：30，13：00-15：00一经下单，实时成交，不可撤单；交易日11：30-13：00之间的下单在未成交状态下也许撤单。</view>
		</view>
		<view class="fund-tooltip">
			<view class="fund-tooltip-title">风险提示</view>
			<view class="fund-tooltip-body">惠理财系列产品，实质为深交所质押式报价回购业务，由华泰证券提供质押物并承担在回购到期时返还客户本金及约定收益的责任，出现亏损的可能性较小，但在一些情况下也可能出现风险，例如因质押物价值波动，折算率调整，司法冻结等原因导致质押物不能足额担保所有报价回购债务以及其他导致资金划付失败、交易失败或终止的情况。</view>
		</view>
		<view class="fund-rules-group">相关协议</view>
		<view class="fund-rules-group">适当性评估要素</view>
		<view class="fund-rules-group">常见问题</view>
		<view class="fund-bottom-note">
			
			市场有风险，投资需谨慎。
		</view>
		<view class="fund-bottom-declare">
			特别声明：部分产品为定制产品，可能会对购买有特定的群体、金额限制。所有购买以实际订单确认结果为准。
		</view>
		<view class="fund-bottom-disclaimer">
			产品的过往业绩并不预示其未来表现，产品管理人管理的其他产品的业绩不构成产品业绩表现的保证。
		</view>
		<view class="fund-bottom layout">
			<view class="fund-bottom-subscribe">
				<view class="fund-bottom-subscribe-icon">
					<image src="../../../static/icon/icon-collection.png"></image>
				</view>
				<view>加自选</view>
			</view>
			<view class="fund-bottom-cacle">
				<view class="fund-bottom-cacle-icon">
						<image src="../../../static/icon/icon-address.png"></image>
					</view>
					<view>计算器</view>
			</view>
			<view @click="handleFundSubmit()" class="fund-bottom-submit">立即购买</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fundData:{
					productName:"惠理财63天期",
					productRemark:"深交所报价回购",
					rate:"1.85",
					miniTotal:1000,
					productTotal:"63"
				},
				orderData:{
					"orderDate":"-",
					"effectiveDate":"-",
					"expireDate":"-",
					"redeemDate":"-",
				},
			}
		},
		onLoad(options) {
			this.fromType  = options.fromType
			console.log(options)
			this.productID = options.productID;
			this.refreshProductDetail();
			let curDate = new Date()
			let curTime = curDate.getTime()
			this.orderData.orderDate = curDate.getFullYear()+"-"+(curDate.getMonth()+1)+"-"+curDate.getDate()
			curDate = new Date(curTime+60*60*24*2*1000)
			this.orderData.effectiveDate = curDate.getFullYear()+"-"+(curDate.getMonth()+1)+"-"+curDate.getDate()
			curDate = new Date(curTime+60*60*24*60*1000)
			this.orderData.expireDate = curDate.getFullYear()+"-"+(curDate.getMonth()+1)+"-"+curDate.getDate()
			curDate = new Date(curTime+60*60*24*65*1000)
			this.orderData.redeemDate = curDate.getFullYear()+"-"+(curDate.getMonth()+1)+"-"+curDate.getDate()
		},
		methods: {
			refreshProductDetail:function(){
				this.$fund.getProductDetail({
					"productID":this.productID
				}).then(res=>{
					console.log(res)
					if(res.code == 200){
						//this.fundData = res.data;
					}
				})
			},
			handleBackendButton:function(){
				let jumpUrl = "/pages/fund/main/main"
				if(this.fromType == "column"){
					jumpUrl = "/pages/fund/column/column"
				}
				console.log(this.fromType,jumpUrl)
				//return false;
				uni.redirectTo({
					url:jumpUrl
				})
			},
			handleFundSubmit:function(){
				uni.redirectTo({
					url:"/pages/transaction/fund/fund?productID="+this.productID
				})
			}
		}
	}
</script>

<style>
page { padding-top: 120rpx; padding-bottom: 120rpx; background: #ededed; font-size: 14px; }
.fund-header { position: fixed; top:0; left: 0; right: 0; z-index: 100; }
.fund-header { background: #fff; padding: 15rpx; padding-top:var(--status-bar-height); }

.fund-header-backend { width: 50rpx; height: 40rpx; }
.fund-header-tooltip { width: 600rpx; text-align: center; }
.fund-header-more { width: 50rpx; height: 40rpx; }
.fund-basic { border-bottom: #ededed 20rpx solid; padding: 20rpx 0; background: #fff; }
.fund-basic-rate { width: 285rpx; padding-left: 15rpx; }
.fund-basic-rate-volume { color: red; font-weight: bold; text-align: left; font-size: 22px; }
.fund-basic-rate-tooltip { text-align: left; color: #999; } 
.fund-basic-deadline { width: 250rpx;}
.fund-basic-origin { width: 200rpx; text-align: right; }
.fund-basic-deadline-tooltip {}
.fund-basic-origin-tooltip { color: #c60;}
.fund-basic-deadline-volume { padding: 10rpx 0;}
.fund-basic-origin-volume { padding: 10rpx 0;}

.fund-info { background: #fff; margin-bottom: 25rpx; }
.fund-info-title { border-bottom: #ededed 1px solid; padding: 15rpx; }
.fund-info-box-block { display: flex; padding: 15rpx;}
.fund-info-box-block-note { font-size: 12px; color: #999; }
.fund-info-box-block-note-title { font-size: 16px; color: #333; padding-bottom: 15rpx; }
.fund-info-box-icon { padding-right: 15rpx; padding-top: 15rpx;}

.fund-rules { background: #fff; margin-bottom: 25rpx; }
.fund-rules-title { border-bottom: #ededed 1px solid; padding: 15rpx; }
.fund-rules-process-item { width: 200rpx; text-align: center; padding: 30rpx 0; }
.fund-rules-tooltip { padding: 25rpx 20rpx; color: #999;}

.fund-rules-group { background: #fff; border-bottom: #ededed 1px solid; padding: 15rpx; display: flex; }
.fund-rules-group-tooltip { width: 100rpx; font-size: 12px; text-align: left; color: #999; }
.fund-rules-group-text { width: 600rpx; text-align: right; }
.fund-tooltip { background: #fff; margin-bottom: 25rpx; }
.fund-tooltip-title { border-bottom: #ededed 1px solid; padding: 15rpx; }
.fund-tooltip-body { font-size: 14px; line-height: 20px; padding: 15rpx;}

.fund-info-box-icon { width: 50rpx; height: 50rpx; }

.fund-bottom-note { padding: 50rpx 0; text-align: center; color: #999; font-size: 12px;}
.fund-bottom-declare { color: #c60;  font-size: 12px; padding: 0 15rpx; padding-bottom: 20rpx; }
.fund-bottom-disclaimer { color: #999; font-size: 12px; padding: 0 15rpx; }

.fund-bottom { position: fixed; left: 0; right: 0; bottom: 0; }
.fund-bottom { background: #fff; padding: 15rpx; }
.fund-bottom-cacle { width: 100rpx;}
.fund-bottom-cacle-icon { width: 30rpx; height: 30rpx; padding:0 35rpx; }
.fund-bottom-subscribe { width: 100rpx; }
.fund-bottom-subscribe-icon { width: 30rpx; height: 30rpx; padding:0 35rpx; }
.fund-bottom-submit { background: #ccc; color: #666; width: 450rpx; text-align: center; padding: 15rpx 45rpx; border-radius: 30rpx; }
</style>
